<template>
  <div id="window5">

    <!-- 头部：标题 -->
    <div style="padding: 5px">
      <el-row>
        <!--        标题-->
        <el-col :span="17" style="text-align: right;">矛盾纠纷类型统计</el-col>
        <!--        关闭按钮-->
        <el-col :span="7" style="text-align: right;">
          <div>
            <el-popconfirm title="是否关闭该窗口" @confirm="closeWindow">
              <template #reference>
                <el-icon>
                  <CircleClose/>
                </el-icon>
              </template>
            </el-popconfirm>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 次标题 -->
    <div style="text-align: left; padding-left: 10px">
      <div>状态：已调节</div>
      <div>时间段：2018-06-10至2018-06-14</div>
    </div>

    <!-- 主体-->
    <div ref="chart" style="width: 95%; height: 320px;"></div>

  </div>
</template>

<script>
import * as echarts from 'echarts';
import {defineComponent} from "vue";

import { defineEmits } from 'vue'

const emit = defineEmits()

const closeWindow = () => {
  emit('closeWindow')
}
// 饼图
export default defineComponent({
  setup(props, context) {
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart);
    this.renderChart();
  },
  methods: {
    renderChart() {
      const data = [
        ['amount', 'state'],
        [1, '已调节'],
        [3, '调节中'],
        [5, '未调解'],
      ];

      const option = {
        dataset: {
          source: data,
        },
        grid: { right: '15%', containLabel: true }, // 调整右边距
        xAxis: {
          name: '总数',
          axisLabel: {
            overflow: 'break',
            margin: 10, // 增加横坐标标签的间距
          },
        },
        yAxis: { type: 'category' },
        series: [
          {
            type: 'bar',
            encode: {
              x: 'amount',
              y: 'state',
            },
          },
        ],
      };

      this.chart.setOption(option);
    },
  },
})
</script>

<style scoped>
.button {
  margin-right: auto;
}

.title {
  margin-right: auto;
}
</style>
